<!--  -->
<template>
  <div class='homePage'>
    <h1>插件</h1>
    <div>
      <el-button type="text" @click="gotoPage('puzzleVcode', 0)">拼图验证</el-button>
    </div>
    <h1>JS</h1>
    <div>
      <el-button type="text" @click="gotoPage('bph', 0)">数组扁平化</el-button>
      <el-button type="text" @click="gotoPage('toTree', 0)">数组转化为树形结构</el-button>
      <el-button type="text" @click="gotoPage('fdje', 0)">防抖节流</el-button>
      <el-button type="text" @click="gotoPage('treeFind', 0)">树形结构查找节点</el-button>
    </div>
    <h1>css</h1>
    <div>
      <el-button type="text" @click="gotoPage('puzzleVcode', 0)">拼图验证</el-button>
    </div>
    <h1>其他</h1>
    <div>
      <el-button type="text" @click="gotoPage('canvas', 0)">canvas圈图</el-button>
      <!-- <el-button type="text" @click="gotoPage('datacenter')">数据中心</el-button> -->
    </div>
    <div>
      <el-button type="text" @click="gotoPage('mqtt', 0)">MQTT</el-button>
      <!-- <el-button type="text" @click="gotoPage('datacenter')">数据中心</el-button> -->
    </div>
    <h1>学习资料</h1>
    <div>
      <el-button type="text" @click="gotoPage('https://feiyuandmaoxia.icu/py', 1)">python资料</el-button>
      <!-- <el-button type="text" @click="gotoPage('datacenter')">数据中心</el-button> -->
    </div>
  </div>
</template>

<script>
//import 《组件名称》 from '《组件路径》';

export default {
  components: {},
  data() {
    return {

    };
  },
  methods: {
    gotoPage(val, flag) {
      if (flag == 1) {
        window.open(val, "_blank");

      } else {

        this.$router.push({ name: val })
      }
    }
  },
  computed: {

  },
  watch: {},
  created() {

  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {

  },
  beforeCreate() { }, //生命周期 - 创建之前
  beforeMount() { }, //生命周期 - 挂载之前
  beforeUpdate() { }, //生命周期 - 更新之前
  updated() { }, //生命周期 - 更新之后
  beforeDestroy() { }, //生命周期 - 销毁之前
  destroyed() { }, //生命周期 - 销毁完成
  activated() { }, //如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类
.homePage {
  padding: 0 50px;

  .el-button--text {
    font-size: 16px;
  }
}
</style>